
<template>
  <div class="container">
    <!--<Search></Search>-->
    <div class="card-list">
      <div v-for="(item,index) in cardList" @click="getCardDetail(item)">
        <Card :item="item" :key="index" ></Card>
      </div>
    </div>

  </div>
</template>

<script>
  import search from '@/components/search'
  import card from '@/components/card'
  import { get } from '@/utils'

  export default {
    data () {
      return {
        motto: 'Hello World',
        userInfo: {},
        cardList: []

      }
    },
    components: {
      Search: search,
      Card: card
    },
    methods: {
      getUserInfo () {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.userInfo = res.userInfo
              }
            })
          }
        })
      },
      getCardList () {
        get('/api/cardlist', {

        }).then(res => {
          // console.log(res)
          this.cardList = res.data.data
        })
      },
      getCardDetail (item) {
        wx.navigateTo({
          url: `/pages/detail/main?id=${item.id}&title=${item.title}`
        })
      }
    },

    created () {
      // 调用应用实例的方法获取全局数据
      this.getUserInfo()
      this.getCardList()
    }
  }
</script>

<style scoped lang="scss">

  .counter {
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
  .card-list{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap ;
    justify-content:center;
    align-content: flex-start;
    width: 100%;
  }

</style>
